<!--短信验证码-->
<template>
  <view class="yl-phone-msg-code">
    <view class="inputbox row-start">
		<view style="display: flex;align-items: center;margin-right: 10rpx;color: #999999;width: 98rpx;">
		  <slot name="getCode">
			  <!-- <image src="../../../../static/img/icon_phone.png" style="width: 36rpx;height: 36rpx;" mode=""></image> -->
			  手机号
		  </slot>
		</view>
      <text v-if="mobilePrepend" class="mobile-prepend" :style="prependStyle">{{mobilePrepend}}</text>
      <input type="number" :min="0" v-model.trim="msgForm.mobile" :style="mobileInputStyle" placeholder-class="input-placeholder" placeholder="请输入手机号" maxlength="11"/>
    </view>
    <view class="inputbox">
		<view style="display: flex;align-items: center;margin-right: 10rpx;color: #999999;width: 98rpx;">
		  <slot name="getCode">
			  <!-- <image src="../../../../static/img/icon_password.png" style="width: 36rpx;height: 36rpx;" mode=""></image> -->
			  密码
		  </slot>
		</view>
      <input v-model.trim="msgForm.code" placeholder-class="input-placeholder" :password="passwordFlag" :style="codeInputStyle" placeholder="请输入密码" @input="$emit('codeChange',msgForm)"/>
      <view  @click="getMsgCode">
        <slot name="getCode">
		  <image class="row-center" style="width: 60rpx;height: 40rpx;" :src="hideIndex == 0?'http://118.190.211.147/uploads/img/icon_disabled.png':'http://118.190.211.147/uploads/img/icon_hide.png'" mode=""></image>
        </slot>
      </view>
    </view>
  </view>
</template>

<script>
import {isPhone} from "../../../yl-utils/js_sdk/validate";
import {showAlert,getStyleStr} from "../../../yl-utils/js_sdk/util";

export default {
  props:{
    reqMobileCode:Function,//获取验证码函数
    mobilePrepend:String,//手机号前缀
    mobilePrependStyle:{
      type:[Object,String],
      default:()=>{
        return {}
      }
    },//输入框前置样式
    msgCodeTextConfig:{
      type:Object,
      default:()=>{
        return {
          getCodeText:"",
          reCodeText:"",
        }
      }
    },// 发送按钮文字
    getCodeStyle:{
      type:[Object,String],
      default:""
    },//获取验证码样式
    mobileStyle:{
      type:[Object,String],
      default:()=>{
        return {}
      }
    },//电话输入框样式
    codeStyle:{
      type:[Object,String],
      default:()=>{
        return {}
      }
    }, //验证码输入框样式

  },
  data() {
    return {
      msgForm:{},//短信表单
      msgCodeText:this.msgCodeTextConfig.getCodeText || '获取验证码',//短信按钮文字
	  hideIndex:0,//密码显隐
	  passwordFlag:true
    }
  },
  computed:{
    prependStyle(){
      const {mobilePrependStyle} = this
      if(typeof mobilePrependStyle==='string'){
        return mobilePrependStyle
      }
      return getStyleStr({...mobilePrependStyle})
    },
    getCodeBtnStyle(){
      const {getCodeStyle} = this
      if(!getCodeStyle){
        return  {
         "font-family": 'PingFang SC, PingFang SC',
         "font-weight": 'normal',
         border:"none",
         color:"#3EABF6",
         "border-radius": "10rpx",
         width:"170rpx",
         height:"64rpx",
         "font-size": "24rpx",
         'background-color':'#F6C511'
        }
      }
      if(typeof getCodeStyle==='string'){
        return getCodeStyle
      }
      return getStyleStr({...getCodeStyle})
    },
    mobileInputStyle(){
      const {mobileStyle} = this
      if(typeof mobileStyle==='string'){
        return mobileStyle
      }
      return getStyleStr({...mobileStyle})
    },
    codeInputStyle(){
      const {codeStyle} = this
      if(typeof codeStyle==='string'){
        return codeStyle
      }
      return getStyleStr({...codeStyle})
    }
  },
  methods: {
    async getMsgCode(){
      if(this.hideIndex == 0){
		  this.hideIndex = 1
		  this.passwordFlag = false
	  }else if(this.hideIndex == 1){
		  this.hideIndex = 0
		  this.passwordFlag = true
	  }
    },
   
  },
  beforeDestroy(){
    clearInterval(this.codeInterval)
  }
}
</script>

<style scoped lang="scss">
.yl-phone-msg-code{
  .inputbox {
    display: flex;
    padding: 0 20rpx;
	height: 96rpx;
    align-items: center;
    // border-bottom: 1rpx solid #eeeeee;
	background: #F5F5F5;
	border-radius: 48rpx;
    position: relative;
	margin-bottom: 30rpx;
    .mobile-prepend{
      margin-right: 20rpx;
    }
  }
  .inputbox .clearBox{
    width:32rpx;
    height:32rpx;
  }
  .inputbox .clear{
    width:32rpx;
    height:32rpx;
  }
  input {
    flex: 1;
    color:#333333;
	font-size: 28rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
  }
  .row-center {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
}

</style>
